//Component Object
Component({
  properties: {
    size:{
      type:String,
      value:'100px',
      observer: function(){}
    },
    value:{
      type:Number,
      value:0,
      observer: function(newValue:number){
        if(newValue > 100){
          this.setData({
            value:100
          })
        }
        this.setData({
          rightRotateValue:this.rightPrecentToAngle(newValue),
          leftRotateValue:this.leftPrecentToAngle(newValue)
        })
      }
    },
    color:{
      type:String,
      value:'#1989fa',
    },
    trackColor:{ // 轨道颜色
      type:String,
      value:'#f5f5f5',
      observer: function(){}
    },
    trackWidth:{
      type:String,
      value:'4px',
      observer: function(){}
    }
  },
  data: {
    rightRotateValue:-135,
    leftRotateValue:-135,
  },
  methods: {
    rightPrecentToAngle:function(precent:number){
      if(precent > 100){
        precent = 100
      }
      if(precent >= 50){
        return 45
      }else {
        return -135 + Math.floor(precent * 180 / 50)
      }
      
    },
    // 圆环变化的角度是从-135 到 45 deg
    leftPrecentToAngle:function(precent:number){
      if(precent > 100){
        precent = 100
      }
      if(precent <= 50){
        return -135
      }else {
        return -135 + Math.floor((precent - 50) * 180 / 50)
      }
    }
  },
  created: function(){

  },
  attached: function(){
    this.setData({
      rightRotateValue:this.rightPrecentToAngle(this.data.value),
      leftRotateValue:this.leftPrecentToAngle(this.data.value)
    })
  },
  ready: function(){

  },
  moved: function(){

  },
  detached: function(){

  },
});